禁止滚动条出现页面跳动

水平居中布局与滚动条跳动的千年难题

1.信息流页面，如新浪微博，是从上往下push渲染的。开始只有头部一些信息加载，此时页面高度有限，没有滚动条；然后，更多内容显示，滚动条出现，占据可用宽度，margin: 0 auto主体元素自然会做偏移——跳动产生。

2.JS交互，本来默认页面高度不足一屏，结果点击了个“加载更多”，内容超过一屏，滚动条出现，页面主体就会左侧跳动。

3.结构类似几个页面通过头部的水平导航刷新切换，结果有的页面有滚动条，有的没有。造成的结果就是，导航尼玛怎么跳来跳去！

CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动

.wrap-outer {
    margin-left: calc(100vw - 100%);
    // 或者
    padding-left: calc(100vw - 100%);
}

首先：.wrap-outer指的是居中定宽主体的父级，如果没有，创建一个（使用主体也是可以实现类似效果，不过本着宽度分离原则，不推荐）;

然后: calc是CSS3中的计算，IE10+浏览器支持，IE9浏览器基本支持(不能用在background-position上);

最后: 100vw相对于浏览器的window.innerWidth，是浏览器内部宽度，注意，滚动条宽度也计算在内！ 而100%是可用宽度，是不含滚动条宽度。

于是: calc(100vw - 100%)就是浏览器滚动条宽度(如果没有滚动条则是0)！左右都有一个滚动条宽度（或都是0）被占用，主体内容就可以永远居中浏览器啦，从而没有任何跳动！

兼容性

支持：IE9+ 以及其他现代浏览器。

窄屏幕宽度下的处理

上面CSS还是有一点瑕疵的，浏览器宽度比较小的时候，左侧留的白明显与右边多，说不定会显得有点傻。此时，可能需要做点响应式处理会更好一点：

@media screen and (min-width: 1150px) {
   .wrap-outer {
       margin-left: calc(100vw - 100%);
   }
}

更新于2016年9月28日

经过一些列项目实践，关于浏览器出现滚动条和消失页面不滚动有了更加终极的解决方案，经过大型项目实践已经验证相当具有可行性，这里特意分享下：

html {
  overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
  width: 100vw;
  overflow: hidden;
}

三、结束语

本文参考自：Fix ‘jumping scrollbar’ issue using only CSS

阅读原文